<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<style type="text/css">
		table{
			width: 800px;
			text-align: center;
		}
	</style>
</head>
<body>
	<table align="center" border="1" cellspacing="0" cellpadding="10">
		<caption><h1>购物车</h1></caption>
		<thead>
			<tr>
				<th>
					<label>全选</label>
					<input type="checkbox" name="" id="qx">
				</th>
				<th>单价</th>
				<th>数量</th>
				<th>单品总价</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td class="tdSle"><input type="checkbox" name="" class="slect"></td>
				<td>5</td>
				<td>
					<input type="button" name="" value="-">
					<input type="text" name="" value="1" size="5" readonly>
					<input type="button" name="" value="+">
				</td>
				<td></td>
				<td><input type="button" name="" value="删除" class="delBtn"></td>
			</tr>
			<tr>
				<td class="tdSle"><input type="checkbox" name="" class="slect"></td>
				<td>5</td>
				<td>
					<input type="button" name="" value="-">
					<input type="text" name="" value="1" size="5" readonly>
					<input type="button" name="" value="+">
				</td>
				<td></td>
				<td><input type="button" name="" value="删除" class="delBtn"></td>
			</tr>
			<tr>
				<td class="tdSle"><input type="checkbox" name="" class="slect"></td>
				<td>5</td>
				<td>
					<input type="button" name="" value="-">
					<input type="text" name="" value="1" size="5" readonly>
					<input type="button" name="" value="+">
				</td>
				<td></td>
				<td><input type="button" name="" value="删除" class="delBtn"></td>
			</tr>
			<tr>
				<td class="tdSle"><input type="checkbox" name="" class="slect"></td>
				<td>5</td>
				<td>
					<input type="button" name="" value="-">
					<input type="text" name="" value="1" size="5" readonly>
					<input type="button" name="" value="+">
				</td>
				<td></td>
				<td><input type="button" name="" value="删除" class="delBtn"></td>
			</tr>
		</tbody>
	</table>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	var checkboxes=$('tb').getElementsByClassName('slect');
	//绑定全选事件
	$('qx').onclick=function(){
		for(var i=0;i<checkboxes.length;i++){
			checkboxes[i].checked=this.checked;
		}
	}
	//绑定移入变色事件
	var boxList=$('tb').getElementsByClassName('tdSle');
	for(var j=0;j<boxList.length;j++){
		boxList[j].onmouseover=function(){
			this.style.backgroundColor='#ccc';
		}
		boxList[j].onmouseout=function(){
			this.style.backgroundColor='white';
		}
	}
	//绑定删除事件
	var delBtn=$('tb').getElementsByClassName('delBtn');
	for(var k=0;k<delBtn.length;k++){
		delBtn[k].onclick=function(){
		$('tb').removeChild(this.parentNode.parentNode);
	}
	}
</script>
</html>